<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 页头 -->
    <div class="header">
        <div class="container">
            <div class="left" onclick="turn()">
                <img src=""
                    alt="">
                <div>
                    <h1>熊猫优选</h1>
                    <p>XIONG MAO YOU XUAN</p>
                </div>
            </div>
            <div class="centre">
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <button class="search">搜索</button>
            </div>
            <div class="right">
                <div class="outName"></div>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav">
        <div class="container">
            <div class="left">
                <ul class="navUl">
                    <li class="fixed active"><a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/index.html">首页</a></li>
                    <li><a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/9.9.html">9块9包邮</a></li>
                    <li><a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/value.html">超值大额券</a></li>
                    <li><a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/cooling.html">降温急救穿搭</a></li>
                </ul>
            </div>
            <div class="right"></div>
        </div>
    </div>
    <!-- 轮播 -->
    <div id="banner">
        <div class="container">
            <div class="left">
                <ul class="bannerUl">
                    <li><a href="#">女装</a>/<a href="#">女鞋</a></li>
                    <li><a href="#">男装</a>/<a href="#">男鞋</a></li>
                    <li><a href="#">美妆</a>/<a href="#">个护</a></li>
                    <li><a href="#">配饰</a>/<a href="#">箱包</a></li>
                    <li><a href="#">零食王国</a></li>
                    <li><a href="#">母婴用品</a></li>
                    <li><a href="#">手机</a>/<a href="#">数码</a></li>
                    <li><a href="#">内衣袜子</a></li>
                    <li><a href="#">文娱</a>/<a href="#">家居</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="http://img1.lukou.com/static/coupon/p/image_link/v0I932wGsDoUK4eG4P6PIbNkSdPokflI.jpeg">
                        </div>
                        <div class="swiper-slide"><img
                                src="http://img1.lukou.com/static/coupon/p/image_link/hysAxvvgCTiczcuVbbYq99Zlz7q0RQzY.png">
                        </div>
                        <div class="swiper-slide"><img
                                src="http://img1.lukou.com/static/coupon/p/image_link/fCIwSWAleJUCBePcmupGODXBWK3yo8bg.jpeg">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/9.9.html" class="box1 pic">
                    <h2>9块9包邮</h2>
                    <div class="prompt">保你不吃亏</div>
                    <img src="">
                </a>
                <a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/value.html" class="box2 pic quan">
                    <div>
                        <h1>超值大额券</h1>
                        <h3>优惠直击底价</h3>
                        <button>Go</button>
                    </div>
                    <img src="">
                </a>
                <a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/cooling.html" class="box2 pic clothes">
                    <div>
                        <h1>降温急救穿搭</h1>
                        <h3>速来抢购~</h3>
                        <button>Go</button>
                    </div>
                    <img src="">
                </a>
                <a href="#" class="box2 ewm">
                    <div>
                        <h3>扫码下载APP</h3>
                        <h3>发现更多惊喜</h3>
                    </div>
                    <img src=""
                        alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 商品列表 -->
    <div class="xiaobian">
        <div class="container">
            <h3>小编精选</h3>
            <p>每天更新</p>
        </div>
    </div>
    <div class="tatol">
    </div>
    <div class="getMorebox"><button class="getMore">加载更多</button></div>
    <!-- 返回顶部 -->
    <div class="back">顶部</div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            <div class="top">
                <div class="left">
                    <img src="http://img1.lukou.com/static/img/activity/icon.png" alt=""
                        style="width: 112px;height: 112px;">
                    <div class="words">
                        <h1>熊猫优选</h1>
                        <p>年轻人网购首选<br>
                            购物领券更省钱
                        </p>
                    </div>
                    
                </div>
                <div class="right">
                    <a href="#">下载APP</a>
                </div>
            </div>
            <div class="word">
                <img src="http://img1.lukou.com/static/img/activity/policeIcon.png" alt="">
                <p>浙公安网备案 33010602009949号 | ICP备案号:浙ICP备17012864号-1 | </p>
                <img src="http://img1.lukou.com/static/img/activity/license.png" alt="">
                <p>证照信息</p>
            </div>
        </div>
    </div>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/index.js"></script>
    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

    <script>
        var mySwiper = new Swiper('.swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script>
</body>

</html>